<!DOCTYPE html>
<html>
<head>
	<title>xmp测试</title>
	<meta charset="UTF-8">
	<script src="./src/component_modules/avalon/avalon.js"></script>
	<script type="text/javascript">
		avalon.component('ms-button', {
			template: '<div><div><button type="button">这是一个测试的按钮</button></div><button type="button"><slot /></button></div>',
			defaults: {
				buttonText: 'button'
			},
			soleSlot: 'buttonText'
		});
		var vm = avalon.define({
			$id: 'test',
			aaa: {
				buttonText: 'test'
			},
			bb: '测试内容',
			ddd:function () {
				console.log("测试一下");
			},
			click: function () {
				vm.bb = "更新了什么鬼";
			}
		})
	</script>
</head>
<body>
	<h1>这是一个测试页面</h1>
	<div ms-controller="test">
		<h2>这个是用的xmp写法</h2>
		<xmp :widget="{is:'ms-button'}" :click="@ddd" :attr="{title:@bb}">{{@bb}}</xmp>
		<h2>这个使用的是自定义标签</h2>
		<ms-button>{{@bb}}</ms-button>
		<p><button type="button" :click="@click">点击更新</button></p>
	</div>
</body>
</html>